import React from 'react'
import "./index.less"
import { Layout } from 'antd';
const { Header, Footer, Content,Sider, } = Layout;
import {Menu} from 'antd'
const {SubMenu}=Menu
import {AppstoreOutlined,BarChartOutlined,CloudOutlined,ShopOutlined,TeamOutlined,UserOutlined,UploadOutlined,VideoCameraOutlined,} from '@ant-design/icons';

export default class Layout_demo4 extends React.Component{
    render(){
        return (
            <div className="Layout_demo4">
                {/* <h1>layout 布局4</h1> */}
                <Layout>
                    <Sider className="Sider">
                        <div className="logo"></div>
                        <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
                            <Menu.Item key="1" icon={<UserOutlined />}>nav 1</Menu.Item>
                            <Menu.Item key="2" icon={<VideoCameraOutlined />}>nav 2</Menu.Item>
                            <Menu.Item key="3" icon={<UploadOutlined />}>nav 3</Menu.Item>
                            <Menu.Item key="4" icon={<BarChartOutlined />}>nav 4</Menu.Item>
                            <Menu.Item key="5" icon={<CloudOutlined />}>nav 5</Menu.Item>
                            <Menu.Item key="6" icon={<AppstoreOutlined />}>nav 6</Menu.Item>
                            <Menu.Item key="7" icon={<TeamOutlined />}>nav 7</Menu.Item>
                            <Menu.Item key="8" icon={<ShopOutlined />}>nav 8</Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout className="site-layout">
                        <Header className="site-layout-background"></Header>
                        <Content className="Content">
                            <div className="site-layout-background">
                                1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
                            </div>
                        </Content>
                        <Footer className="Footer">Ant Design ©2018 Created by Ant UE</Footer>
                    </Layout>
                </Layout>
            </div>
        )
    }
}